<template>
	<el-header height="auto">
		<!-- 头部 -->
		<div class="header">
			<div class="header-content">
				<el-row :gutter="0" type="flex">
					<!-- logo -->
					<el-col :span="8" :offset="0">
						<router-link to="/" class="logo"></router-link>
					</el-col>
					<el-col :span="8" v-if="isLogin" class="avator-box">
						<router-link :to="{ path: '/user/space' }">
							<el-avatar size="small" :src="userInfo.avatar">
							</el-avatar>
						</router-link>
						<router-link :to="{ path: '/user/space' }">{{
							userInfo.name
						}}</router-link>
						<router-link to="">
							<router-link :to="{ name: 'create' }">
								<el-tag size="small"> 发布菜谱 </el-tag>
							</router-link>
						</router-link>
						<router-link to="">
							<el-tag @click="logout" type="danger" size="small">
								退出登录
							</el-tag>
						</router-link>
					</el-col>
					<el-col :span="8" :offset="0" v-else>
						<router-link
							:to="{ path: '/login', query: { active: 'login' } }"
							class="login"
							>登录</router-link
						>
						<router-link
							:to="{
								path: '/login',
								query: { active: 'register' },
							}"
							class="register"
							>注册</router-link
						>
					</el-col>
				</el-row>
			</div>
		</div>
		<!-- 导航 -->
		<nav>
			<div class="nav-content">
				<el-menu
					mode="horizontal"
					router
					:default-active="$router.currentRoute.path"
				>
					<el-menu-item index="/"> 首页 </el-menu-item>
					<el-menu-item index="/recipe"> 菜谱大全 </el-menu-item>
				</el-menu>
			</div>
		</nav>
	</el-header>
</template>

<script>
import { logout } from '@/api/user';
export default {
	computed: {
		isLogin() {
			return this.$store.getters.isLogin;
		},
		userInfo() {
			return this.$store.state.userInfo;
		},
	},
	methods: {
		logout() {
			this.$confirm('退出登录', '确定退出登陆吗？', {
				distinguishCancelAndClose: true,
				confirmButtonText: '确定',
				cancelButtonText: '取消',
			})
				.then(() => {
					logout().then((res) => {
						console.log(res);
						if (res.code == 0) {
							window.localStorage.clear();
							this.$message.info('退出登录成功');
							this.$router.push({ path: '/login' });
						} else {
							this.$message.info('退出登录失败');
						}
					});
				})
				.catch((err) => {
					this.$message.info('已取消');
				});
		},
	},
};
</script>
<style lang="sass" scoped>
.header
	height: 80px
	background-color: #c90000

	&-content
		.el-row
			width: 1200px
			margin: 0 auto
			display: flex
			justify-content: space-between

			.el-col
				width: 180px

			.logo
				display: block
				width: 184px
				height: 80px
				background: url('https://st-cn.meishij.net/p2/20210113/20210113164218_975.png') no-repeat center
				background-size: 60%

			.login, .register
				line-height: 80px
				color: #fff
				padding: 5px

.avator-box
	display: flex
	align-items: center

	a
		color: #fff
		margin: 0 5px
		font-size: 14px

nav
	background-color: #fff
	box-shadow: 10px 0px 10px rgba(0, 0, 0, 0.4)

.nav-content
	width: 1200px
	margin: 0 auto
</style>